<template>
  <div>
    <a-form
      layout="vertical"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="标题：" :wrapper-col="{ span: 7 }">
        <a-input
          v-model:value="formState.title"
          placeholder="请输入编写者名字"
        />
      </a-form-item>
      <a-form-item label="简要内容：">
        <a-textarea
          v-model:value="formState.introduction"
          placeholder="请输入简要内容"
          :rows="5"
          showCount
          :maxlength="500"
        />
      </a-form-item>
      <a-upload
        v-model:file-list="fileList"
        name="file"
        :multiple="true"
        :action="uploadfile"
        :headers="headers"
        @change="handleChange"
        @preview="handlePreview"
      >
        <a-button>
          <upload-outlined></upload-outlined>
          Click to Upload
        </a-button>
      </a-upload>
      <div v-if="rupload">
        <video :src="videoName" width="320" height="240" controls="controls" />
      </div>
      <!-- <a-form-item>
        <a-button type="primary" @click="onSubmit">Submit</a-button>
      </a-form-item> -->
    </a-form>
  </div>
</template>

<script>
  import { ref, watchEffect, onMounted } from 'vue'
  import { MY_PATH } from '@/common/index.js'
  import { message } from 'ant-design-vue'
  import { UploadOutlined } from '@ant-design/icons-vue'
  export default {
    components: {
      UploadOutlined,
    },
    props: {
      info: Object,
    },
    setup(props) {
      const uploadfile = ref(MY_PATH + '/tsn/media/upload')
      const formState = ref({
        id: undefined,
        title: '',
        introduction: '',
        path: '',
      })
      watchEffect(() => {
        console.log(`text is: ` + props.info.path)
        formState.value = props.info
      })
      const rupload = ref(false)
      onMounted(() => {
        if (props.info.path == '') {
          rupload.value = false
        } else {
          rupload.value = true
          videoName.value = MY_PATH + '/upload/' + formState.value.path
        }
        fileList.value = []
        // console.log('initialization...')
      })
      const yearShowOne = ref(false)
      const openChangeOne = (status) => {
        if (status) {
          yearShowOne.value = true
        }
      }
      // 得到年份选择器的值
      const panelChangeOne = (value) => {
        formState.value.eventTime = value
        yearShowOne.value = false
      }
      const videoName = ref('')
      const onSubmit = () => {
        console.log(formState.value)
      }
      const handleChange = (info) => {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList)
        }

        if (info.file.status === 'done') {
          message.success(`${info.file.name} 上传成功！`)
          rupload.value = true
          formState.value.path = info.file.response.data
          videoName.value = MY_PATH + '/upload/' + info.file.response.data
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败！`)
        }
      }

      const fileList = ref([])
      const handlePreview = () => {
        // console.log(file)
      }
      return {
        fileList,
        headers: {
          //   authorization: 'authorization-text',
        },
        handleChange,
        formState,
        onSubmit,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
          //   offset: 10,
        },
        yearShowOne,
        uploadfile,
        rupload,
        videoName,
        panelChangeOne,
        openChangeOne,
        handlePreview,
      }
    },
  }
</script>
